<script setup>
import { useRouter } from 'vue-router'
import {computed,onMounted,ref} from 'vue'
import {cinemaDetail,cinemaShow,queryDealList} from '../api/api.ts'
import { cityPinia,moviePinia } from '../stores/home'
import { storeToRefs } from 'pinia'
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
const cityStore = cityPinia()
const movieStore = moviePinia()
const {cityId} = storeToRefs(cityStore)
const {cinemaNamePinia,movieNamePinia,hallPinia,langPinia,typePinia,chooseDayPinia,durationPinia,price} = storeToRefs(movieStore)
console.log(movieStore);
const changeMovieInfo = (cinemaName,movieName,hall,lang,type,chooseDay,duration,price,cinemaId,movieId,img)=>{
    movieStore.$patch(state=>{
        state.cinemaNamePinia = cinemaName
        state.movieNamePinia = movieName
        state.hallPinia = hall
        state.langPinia = lang
        state.typePinia = type
        state.chooseDayPinia = chooseDay
        state.durationPinia = duration
        state.price = price
        state.cinemaIdPinia = cinemaId
        state.movieIdPinia = movieId
        state.imgPinia = img
    })
}
const router = useRouter();
let cinemaId = computed(() => router.currentRoute.value.params.id)
const cinemaInfo = ref()
const movieShows = ref([])
const showIndex = ref(0)
const cinemaName = ref()
const movieName = ref()

// 影院详情
const getCinemaDetail= async (id)=>{
    let {data} = await cinemaDetail(id)
    cinemaInfo.value = data
    // console.log(data);
    cinemaName.value = data.nm

}
// 正在上映电影
const getCinemaShows = async (cinemaId,ci)=>{
    let {data}= await cinemaShow(cinemaId,ci)
    movieShows.value = data.movies
    // console.log(data);
    movieName.value = movieShows.value[showIndex.value].nm

}
// 选中影片下标
const changeEvent=(e)=>{
    showIndex.value = e.activeIndex
    showDateIndex.value = 0
    movieName.value = movieShows.value[showIndex.value].nm
}

const dealList = ref([])
// 超值套餐
const getQueryDealList = async ()=>{
    let {data} = await queryDealList()
    dealList.value = data.dealList
    // console.log(data);
}

onMounted(()=>{
    getCinemaDetail(cinemaId.value)
    getCinemaShows(cinemaId.value,cityStore.cityId)
    getQueryDealList()
})

let date = new Date()
let y = date.getFullYear()
let m = date.getMonth()+1
let d = date.getDate()
m = m<10?'0'+m:m
d = d<10?'0'+d:d
let day = `${y}-${m}-${d}`
const dataFilter = (d)=>{
    let yy = d.split('-')[0]
    let mm = d.split('-')[1]
    let dd = d.split('-')[2]
    let day = new Date(d).getDay()
    switch (day) {
        case 0:
            return `周日 ${mm}月${dd}日`
            break;
        case 1:
            return `周一 ${mm}月${dd}日`
            break;
        case 2:
            return `周二 ${mm}月${dd}日`
            break;
        case 3:
            return `周三 ${mm}月${dd}日`
            break;
        case 4:
            return `周四 ${mm}月${dd}日`
            break;
        case 5:
            return `周五 ${mm}月${dd}日`
            break;
        case 6:
            return `周六 ${mm}月${dd}日`
            break;
        default:
            break;
    }
    return 
}
let showDateIndex = ref(0)
const changeShowDateIndex = (index)=>{
    showDateIndex.value = index
}
const endTime = (startTime)=>{
    let dur = movieShows.value[showIndex.value]?.dur
    let starHour = startTime.split(':')[0]
    let starMin = startTime.split(':')[1]
    starHour = starHour[0]=='0'?startHour[1]:starHour
    starMin = starMin[0]=='0'?starMin[1]:starMin
    let totalMin =  (starMin-0)+(dur-0)
    let endMin = totalMin%60
    let endHour = starHour-0 + Math.floor(totalMin/60) 
    endHour = endHour>23 ? endHour-24:endHour
    endHour = endHour<10?'0'+endHour:endHour
    endMin = endMin<10? '0'+endMin : endMin
    // console.log(endHour ,endMin);
    return `${endHour}:${endMin}`
}
const chooseDay = ref()
const duration = ref()
const hall = ref()
const lang = ref()
const type = ref()
const buyTicket=(st,et,h,l,tp,price)=>{
    let isLogin = localStorage.getItem('token')
    if(!isLogin){
        router.push('/login')
    }else{
        duration.value = st+'-'+et
        chooseDay.value = movieShows.value[showIndex.value].shows[showDateIndex.value].showDate
        hall.value = h
        lang.value = l
        type.value = tp
        changeMovieInfo(cinemaName.value,movieName.value,hall.value, lang.value,type.value,chooseDay.value,duration.value,price,cinemaId.value,movieShows.value[showIndex.value].id,movieShows.value[showIndex.value].img)
        router.push(`/buy`)
    }
}
</script>

<template>
    <header>
        <van-icon name="arrow-left" @click="router.go(-1)" />
        <div class="title">
            <!-- <van-text-ellipsis :content="cinemaInfo?.nm" /> -->
            {{ cinemaInfo?.nm }}
        </div>
        <van-icon name="star-o" />
        <!-- <van-icon name="star" /> -->
    </header>
    <div class="addr">
        <div class="left">
            <van-text-ellipsis class="title" :content="cinemaInfo?.nm" />
            <van-text-ellipsis class="location" :content="cinemaInfo?.addr" />
        </div>
        <div class="right">
            <van-icon name="location-o" />
        </div>
    </div>
    <div class="movies">
        <swiper
            :slidesPerView="4"
            :spaceBetween="0"
            :centeredSlides="true"
            @slideChangeTransitionEnd="changeEvent"
            class="mySwiper"
            
        >
        <div class="filter" :style="{backgroundImage: 'url('+ movieShows[showIndex]?.img +')'}"></div>
            <swiper-slide v-for="(el,index) in movieShows" :key="el.id">
                <img :src="el.img" alt="">
            </swiper-slide>
        </swiper>
        <div class="movie-info">
            <div class="movie-name">
                <span class="title">
                    {{movieShows[showIndex]?.nm}}
                </span>
                 <span class="score">
                    <span class="bigger">{{ movieShows[showIndex]?.sc }}</span>分
                </span>
            </div>
            <p class="desc">{{ movieShows[showIndex]?.desc }}</p>
        </div>
        <div class="shows">
            <div class="date">
                <span v-for="(el,index) in movieShows[showIndex]?.shows" :key="el.id" 
                :class="showDateIndex==index?'active':''" @click="changeShowDateIndex(index)">{{ dataFilter(el?.showDate) }}</span>
            </div>
        </div>
        <div class="vipInfo" v-if="cinemaInfo?.vipInfo">
            <div class="left">
            <img :src="cinemaInfo?.vipInfo?.icon" alt="">
            <div class="text">{{ cinemaInfo?.vipInfo?.desc }}</div>
        </div>
            <van-icon name="arrow" />
        </div>
        <div class="play-list">
            <div class="card" v-for="el in movieShows[showIndex]?.shows[showDateIndex].plist">
                <div class="time">
                    <div class="start-time">{{ el.tm }}</div>
                    <div class="end-time">{{ endTime(el.tm) }}散场</div>
                </div>
                <div class="type">
                    <div class="lang">{{ el.lang }} {{ el.tp }}</div>
                    <p class="th">{{ el.th }}</p>
                </div>
                <div class="price">
                    <div class="money">￥{{ el.baseSellPrice }}</div>
                    <div class="vip" v-if="el.vipPriceName">
                        <div class="vipPriceName">{{ el.vipPriceName }}</div>
                        <div class="vipPrice">￥{{ el.vipPrice }}</div>
                    </div>
                    <p class="text">{{ el.extraDesc }}</p>
                </div>
                <button @click="buyTicket(el.tm,endTime(el.tm),el.th,el.lang,el.tp,el.baseSellPrice)">购票</button>
            </div>
        </div>
    </div>
    <div class="diliver"></div>
    <div class="dealList">
        <div class="title">影院超值套餐</div>
        <div class="content">
            <div class="deal" v-for="el in dealList" :key="el.dealId">
                <img :src="el.imageUrl" alt="">
                <div class="right">
                    <div class="top">
                        <div class="person-num">{{ el.titleTag }}</div>
                        {{ el.title }}
                    </div>
                    <div class="bottom">
                        <div class="price">￥{{ el.price }}</div>
                        <div class="sale">
                            <p class="curNumberDesc">{{ el.curNumberDesc }}</p>
                            <button>去购买</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
header{
    width: 100%;
    height: 50px;
    background-color: #e54848;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .title{
        width: 70%;
        overflow: hidden;
    }
}
.addr{
    display: flex;
    padding: 15px;
    .left{
        width: 75%;
        padding-right: 30px;
        position: relative;
        .title{
            font-size: 17px;
            color: #333;
            font-weight: 700;
        }
        .location{
            color: #999;
            font-size: 13px;
        }
        &::after{
            position: absolute;
            content: '';
            display: block;
            width: 2px;
            height: 30px;
            background-color: #d8d8d8;
            right: 0;
            top: 12px;
        }
    }
    .right{
        display: flex;
        flex: 1;
        font-size: 24px;
        color: #007aff;
        justify-content: center;
        align-items: center;
    }
}
.swiper {
    position: relative;
    width: 100%;
    height: 135px;

    .filter{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-position: 0 center;
        filter: blur(40px);
        background-color: #40454d;
        opacity: .55;
    }
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  img {
    display: block;
    width: 65px;
    height: 95px;
    object-fit: cover;
    }
    &.swiper-slide-active{
        position: relative;
        img{
            width: 74.75px;
            height: 109.25px;
            border: 2px solid #f5f5f5;
        }
        &::after{
            content: "";
            position: absolute;
            bottom: 6px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 10px;
            height: 5px;
            background: url() no-repeat;
            background-size: contain;
        }
    }
}
.movies{
    .movie-info{
        padding: 11px 15px;
        text-align: center;
        border-bottom: 2px solid #f5f5f9;
        .movie-name{
            .title{
                font-size: 17px;
                color: #333;
                font-weight: 700;
                margin-right: 5px;
            }
            .score{
                color: #ffb400;
                font-size: 10px;
                .bigger{
                    font-size: 16px;
                    font-weight: 700;
                }
            }
        }
        .desc{
            color: #999;
            font-size: 13px;
            margin-top: 5px;
        }
    }
    .shows{
        width: 100%;
        overflow: hidden;
        height: 45px;

        .date{
            height: 45px;
            display: flex;
            overflow-x: auto;
            padding-bottom: 10px;
            span{
                display: flex;
                // width: 80px;
                height: 100%;
                font-size: 14px;
                align-items: center;
                margin-left: 30px;
                flex-shrink:0;
                &:nth-child(1){
                    margin-left: 15px;
                }
                &:last-child{
                    margin-right: 15px;
                }
                &.active{
                    position: relative;
                    color: #e54848;
                    &::after{
                        content: '';
                        display: block;
                        position: absolute;
                        height: 2px;
                        width: 100%;
                        background-color: #e54848;
                        bottom: 0;
                    }
                }
            }
        }
    }
    .vipInfo{
        display: flex;
        align-items: center;
        background-color: #fff5ea;
        height: 42px;
        padding: 0 15px;
        justify-content: space-between;
        .left{
            display: flex;
            align-items: center;
        }
        img{
            width: 15px;
            margin-right: 10px;
        }
        .text{
            color: #fa9600;
            font-size: 12px;
        }
        .van-icon{
            color: #777;
            // justify-self: end;
        }
    }
    .play-list{
        .card{
            display: flex;
            padding: 15px;
            align-items: center;
            .time{
                display: flex;
                flex-direction: column;
                justify-content: center;
                .start-time{
                    font-size: 20px;
                    color: #333;
                }
                .end-time{
                    margin-top: 10px;
                    color: #999;
                    font-size: 11px;
                }
            }
            .type{
                margin-left: 17px;
                width: 30%;
                .lang{
                    font-size: 13px;
                    color: #333;
                }
                .th{
                    color: #999;
                    font-size: 11px;
                    margin-top: 7px;
                }
            }
            .price{
                margin-left: 5px;
                .money{
                    color: #f03d37;
                    font-size: 19px;
                    
                }
                .vip{
                    width: 80px;
                    display: flex;
                    font-size: 10px;
                    border: 1px solid #ff9000;
                    border-radius: 2px;
                    margin-left: 4px;
                    margin-top: 3px;
                    .vipPriceName{
                        color: #fff;
                        background-color: #f90;
                    }
                    .vipPrice{
                        color: #f90;
                    }
                }
                .text{
                    color: #999;
                    margin-top: 5px;
                    font-size: 11px;
                }
            }
            button{
                color: #f03d37;
                background-color: #fff;
                outline: none;
                border: 1px solid #f06762;
                font-size: 12px;
                border-radius: 50px;
                padding: 5px 10px;
                margin-left: 30px;
            }
        }
    }
    
}
.diliver{
    width: 100%;
    height: 10px;
    background-color: #f0f0f0;
}
.dealList{
    padding: 0 15px;
    margin-top: 10px;
    .title{
        padding: 12px 0;
        font-size: 15px;
        color: #666;
        border-bottom: 1px solid #eee;
    }
    .content{
        .deal{
            padding: 15px 0;
            display: flex;
            img{
                width: 92px;
                height: 92px;
            }
            .right{
                margin-left: 15px;
                flex: 1;
                display: flex;
                flex-direction: column;
                .top{
                    display: flex;
                    font-size: 14px;
                    .person-num{
                        background-color: #f90;
                        color: #fff;
                        font-size: 10px;
                        padding: 0 4px;
                        line-height: 15px;
                        margin-right: 7px;
                    }
                }
                .bottom{
                    display: flex;
                    flex: 1;
                    justify-content: space-between;
                    align-items: flex-end;
                    .price{
                        color: #f03d37;
                        font-size: 17px;
                    }
                    .sale{
                        display: flex;
                        flex-direction: column;
                        align-items: end;
                        .curNumberDesc{
                            font-size: 12px;
                            color: #999;
                            margin-bottom: 5px;
                        }
                        button{
                            background-color: #f03d37;
                            color: #fff;
                            font-size: 12px;
                            outline: none;
                            border: none;
                            padding: 8px;
                            border-radius: 3px;
                        }
                    }
                }
            }
        }
    }
}
</style>